<template>
	<view class="tabs">
		<scroll-view scroll-y="" :style="{height: orderHeight+'px'}">
			<view class="allPannel">
				<view class="card box-c animated fadeIn" hover-class="tada" v-for="(item,index) in orderList">
					<view class="head box d-ai-c d-jc-sb">
						<view class="box d-ai-c">
							<text style="font-size: 26rpx;">{{item.shopName}}</text>
							<text style="margin-left: 10rpx; font-size: 24rpx ;color: #999999;"
								class="iconfont iconqianjin"></text>
						</view>
						<view class="">
							<text class="" style="color:#666666;font-size: 22rpx;">已有{{item.number}}人报名</text>
						</view>
				
					</view>
					<view class="box" @click="getInfo(item.shopId,item.id,item.className,item.id)">
						<view class="boximg">
							<image class="shop-logo" :src="item.image" />
						</view>
						<view class="list-1">
							<view class="">{{item.className}}</view>
							<view class="list-1-t">
								<image style="width: 24rpx;height:22rpx" src="../../static/images/taecher/dz@2x.png"
									mode=""></image>
								<view style="margin-left: 7rpx;">{{item.classAddress}}</view>
							</view>
							<view class="">
								<image style="width: 24rpx;height:22rpx" src="../../static/images/taecher/sj@2x.png"
									mode=""></image>
								<text style="margin-left: 7rpx;">{{item.startTime}}-{{item.endTime}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				orderHeight: 550,
				hasNextPage: true,
				refresherThreshold: 50,
				refresherTriggered: false,
				_refresherTriggered: false,
				pageNum: 1,
				pageSize: 20,
				orderList: '',
				time: ''
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(0)
					//windoHeight为窗口高度，主要使用的是这个

				}
			})
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:'./mylesson'
			})
		},
		onLoad() {
			this.getOrderList()

		},
		methods: {
			async make(pupOrderNo) {
				// 回调方式
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: pupOrderNo,
					size: 250,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						console.log(res)
					}
				})
			},
			getInfo(shopId, classOrActivityId, className, id) {
				uni.navigateTo({
					url: '../teacher/classInfo?shopId=' + shopId + '&classOrActivityId=' + classOrActivityId +
						'&className=' + className + '&id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/,
					'')
			},
			datatime(value) {
				var data = new Date(value);
				var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
				var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
				return data.getFullYear() + "-" + month + "-" + date;
				console.log(data.getFullYear() + "-" + month + "-" + date)
			},

			async getOrderList() {
				let _this = this
				this.$api.getMyClass().then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						_this.orderList = res.data.dataMap
						for (var i = 0; i < _this.orderList.length; i++) {
							_this.orderList[i].startTime = _this.datatime(res.data.dataMap[i].startTime)
							_this.orderList[i].endTime = _this.datatime(res.data.dataMap[i].endTime)
						}


					}
				})
			}

		}
	}
</script>

<style scoped>
	.list-1-t{
		display: flex;
		align-items: center;
	}
	.list-1-t>view{
		width: 450rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;

	}
	page {
		background-color: #F8F8F8;
	}

	.head {
		color: #666666;
		height: 60rpx;
		position: relative;
		border: 1rpx solid white;
	}


	.btn-shop-list {
		background-color: #FF5551;
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}

	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.order_null text {
		margin: 0 auto;
		color: #c8c8c8;
	}

	.order_null image {
		margin: 60rpx auto;
		width: 250rpx;
		height: 250rpx;
	}

	.djc-s-a {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.list-1 {
		padding: 0 0 0 20rpx;
	}

	.list-1 view:nth-child(1) {
		font-weight: 600;
		margin-top: -7rpx;
		margin-bottom: 15rpx;
	}

	.list-1 view:nth-child(2) {
		font-size: 24rpx;
		margin-top: 0rpx;
		color: #9e9e9e;
	}

	.list-1 view:nth-child(3) {
		font-size: 24rpx;
		margin-top: 0rpx;
		color: #9e9e9e;
	}

	.info {
		width: 680rpx;
		margin: 0 auto;
		padding-top: 15rpx;

	}


	.aj {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.info {
		display: flex;
		justify-content: space-between;
	}

	.info text:nth-child(1) {
		flex: 1.8;
	}

	.info text:nth-child(2) {
		flex: 1;
		color: #959595;
	}

	.info text:nth-child(3) {
		flex: 1.4;
		text-align: center;
	}

	.last text:first-child {
		font-weight: 600;

	}

	.last text:last-child {
		font-weight: 600;
		color: #FF5551;

	}

	.shop-logo {
		width: 180rpx;
		height: 100%;
		border-radius: 10rpx;
	}

	.boximg {
		width: 180rpx;
		height: 130rpx;
		border-radius: 10rpx;
	}

	.card {
		display: flex;
		width: 650rpx;
		height: 240rpx;
		margin: 30rpx auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 7rpx 30rpx;
		/* margin-bottom: 30rpx; */
		/* border: 1px solid red; */
	}


	.line {
		height: 8rpx;
		background-color: #FF5551;
		width: 50%;
		margin: auto;
		border-radius: 50rpx;
		margin-top: 5rpx;
	}

	.line-gray {
		height: 1rpx;
		width: 660rpx;
		background-color: #f0f0f0;
		margin: auto;
		border-radius: 24rpx;
		z-index: 99;
	}

	,
	.tab-bar {
		/* #ifdef APP-PLUS */
		width: 750rpx;
		/* #endif */
		height: 42px;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	,
	.tabs {
		flex: 1;
		flex-direction: column;
		background-color: #F8F8F8;
		overflow: hidden;
	}

	,
	.title-1 {}

	.score {
		color: #ff0000;
		position: absolute;
		right: 50rpx;

	}

	.del-order {
		right: 200rpx;
		padding: 0rpx 15rpx;

	}

	.sub-order {
		color: #ffffff;
		padding: 0rpx 15rpx;
		right: 30rpx;
	}

	.image_icon {
		width: 140upx;
		height: 140upx;
	}

	.active {
		color: #a7a7a7;
	}

	.title {
		padding: 10rpx;
		font-size: 28rpx;
		width: 150rpx;
		text-align: center;

	}

	.box {
		flex-direction: row;
		display: flex;
		margin-top: 10rpx;
	}
	.allPannel{
		overflow: hidden;
		padding-bottom: 20rpx;
	}
	/* 	.box-c {
		flex-direction: column;
		display: flex;
	} */
</style>
